<template>
  <el-form ref="varietyForm" :model="form" label-width="100px">
    <div
      style="
        width: 100%;
        display: flex;
        align-items: flex-end;
        border-bottom: 1px #eee solid;
        margin-bottom: 20px;
        margin-left: 30px;
        margin-top: 20px;

      "
    >


      <span style="font-size: 18px; color: #409eff; margin: 10px 0"
        >推荐店铺</span
      >

      <div class="report_header_query">
        <!-- <el-select v-model="form.enterpriseId" placeholder="请选择类型">
            <el-option label="" :value="Number(0)"></el-option>
          </el-select> -->
      </div>
    </div>
    <div style="display: flex">
      <el-form-item label="菜品名称" prop="name">
        {{ name }}
      </el-form-item>
    </div>
    <div>
      <el-form-item label="缩略图">
        <img :src="thumbnail" alt="" style="width: 100px" />
      </el-form-item>
    </div>
    <el-form-item label="推荐店铺" prop="type">
      <!-- <el-select v-model="form.enterpriseId" placeholder="请选择类型">
            <el-option label="" :value="Number(0)"></el-option>
          </el-select> -->
      <el-select
        v-model="shopName"
         placeholder="请选择"
        style="width: 200px"
         :filter-method="remoteMethodt"
         filterable
         value-key="id"
         @change="changes"
      >
        <el-option
          v-for="item in Merchant"
          :key="item.id"
          :label="item.name"
          :value="item"
        >
        </el-option>
      </el-select>
      <el-button
        style="margin-left: 20px"
        type="primary"
        :loading="clicked"
        @click="saverecommend('varietyForm')"
        >&nbsp&nbsp添 加&nbsp&nbsp</el-button
      >
    </el-form-item>

    <div style="margin-bottom: 20px">
      <el-input
        prefix-icon="el-icon-search"
        placeholder="请输入店铺名"
        style="width: 200px; margin-left: 100px"
        v-model="lookupname"
      ></el-input>
      <el-button type="primary" style="margin-left: 20px" @click="lookup"
        >查找店铺</el-button
      >
    </div>

    <el-table :data="tableData" style="width: 100%" row-key="id" border stripe>
      <el-table-column type="index" label="序号" width="60"/>
      <el-table-column prop="name" align="left" label="店铺名称" />
      <el-table-column prop="address" label="详细地址" align="left" />
      <el-table-column fixed="right" align="center" label="操作" width="80">
        <template slot-scope="scope">
          <div
            style="display: flex; flex-direction: row; justify-content: center"
          >
            <!-- <el-tooltip v-permission="['shop.edit']" class="item" effect="dark" content="编辑" placement="top-start">
                <a @click="editClick(scope.row)"><i style="color: #409EFF" class="el-icon-edit" /></a>
              </el-tooltip> -->
            <el-tooltip

              class="item"
              effect="dark"
              content="删除"
              placement="top-start"
            >
              <a style="margin-left: 10px" @click="delet(scope.row)"
                ><i style="color: #f56c6c" class="el-icon-delete"
              /></a>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </el-form>
</template>
<script>
import { save, list as lsitb } from "@/api/billFareAffiliated";
import { del } from "@/api/billFareAffiliated";
import permission from "@/directive/permission/index.js";
import { mchList } from "@/api/shop";
import { EventBus } from "@/api/eventBus";
import utils from "../../utils/utils.js";
export default {
  name: "variety-recommend",
  directives: { permission },
  data() {
    return {
      shopName:"",
      pageNum: 1,
      lookupname: "",
      tableData: [],
      thumbnail: "",
      name: "",
      form: {
        billFareId: "",
        shopId: "",
      },
      Merchant: [],
      clicked: false,
    };
  },
    watch: {
    // 只要路由发生变化就重新获取数据
    $route(newVal, oldVal) {
      console.log(newVal);
      if (newVal.name =="variety-recommend" && newVal.query.id != this.form.billFareId) {
        this.thumbnail = this.$route.query.thumbnail;
        this.name = this.$route.query.name;
        this.form.billFareId = this.$route.query.id;
       this.getbillFare();
      }
    },
  },
  created() {
    this.thumbnail = this.$route.query.thumbnail;
    this.name = this.$route.query.name;
    this.form.billFareId = this.$route.query.id;
    this.getList();
    this.getbillFare();
  },
  methods: {
    changes(val){
      this.shopName=val.name
      this.form.shopId=val.id
    },
    remoteMethodt(val) {
      this.shopName=val
      this.getList()
    },
    lookup() {
      this.pageNum = 1;
      this.getbillFare();
    },
    delet(form) {
      var billFare = {
        shopId: form.id,
        billFareId: this.form.billFareId,
      };
      var _this = this;
      this.$confirm("确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          del(billFare)
            .then((response) => {
              console.log(billFare);
              console.log(response);
              this.getbillFare();
              //   if (response.type)
              //     // 更新列表数组
              //     _this.tableData.forEach(function (item, index) {
              //       if (item.id == data.id) {
              //         _this.tableData.splice(index, 1);
              //       }
              //     });
            })
            .catch((error) => {
              console.log("error!!");
            });
        })
        .catch(() => {});
    },

    getList() {
      mchList({
        scopeType:2,
           name:this.shopName
      })
        .then((resolve) => {
          this.Merchant = resolve.data.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },

    getbillFare() {
      let params = new URLSearchParams();
      params.append("billFareId", this.form.billFareId);
       params.append("shopName", this.lookupname);
      lsitb(params)
        .then((resolve) => {
          console.log(resolve);
          this.tableData = resolve.data.data;
          console.log(this.tableData);
        })
        .catch((error) => {
          console.log(params);
          console.log(error);
        });
    },

    saverecommend(form) {
      const _this = this;
      this.$refs[form].validate((valid) => {
        if (valid) {
          // 校验表单
          _this.clicked = true;
          console.log(_this.form);
          let params = new URLSearchParams();

          save(_this.form)
            .then((response) => {
              console.log(response);
              _this.clicked = false;
             // _this.$store
                //.dispatch("tagsView/delView", _this.$route)
                //.then(({ visitedViews }) => {
                  //   _this.$router.push({
                  //     // path: '/variety/list'
                  //   })
               // });
              // 关闭当前tab回到列表
              this.getbillFare();
            })
            .catch((error) => {
              _this.clicked = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
 <style scoped>
.menu-wrapper {
  margin: 15px;
}
</style>
